<template>
    <!-- 商品信息 -->
    <div class="goodsinfo-container mui-content">
        
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <div class="mui-card">
            <div class="mui-card-content">
                <!-- 轮播图 -->
                <swiper :data="goodsPics" :height="'200px'" :width="'auto'"></swiper>
            </div>
        </div>
        <!-- 商品详情 -->
        <div class="mui-card">
            <div class="mui-card-header">{{ goodsInfo.name }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="price">市场价： <i>￥{{ goodsInfo.originalPrice }}</i> 促销价： <span>￥{{ goodsInfo.minPrice }}</span></div>
                    <div class="buy-number">
                        <h3>购买数量：</h3>
                        <numbox @buyNumber="getNum" :maxNum="goodsInfo.stores"></numbox>
                    </div>    
                    <div>
                        <mt-button size="small" type="primary">立即购买</mt-button>
                        <mt-button size="small" type="danger" @click="addShopCar">加入购物车</mt-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header">
                <mt-navbar v-model="selected">
                    <mt-tab-item id="1">商品参数</mt-tab-item>
                    <mt-tab-item id="2">商品评论</mt-tab-item>
                </mt-navbar>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-tab-container v-model="selected">
                        <mt-tab-container-item id="1">
                            <p>商品货号： {{ goodsInfo.categoryId }}</p>
                            <p>库存情况： {{ goodsInfo.stores }}</p>
                            <p>上架时间： {{ goodsInfo.dateAdd | dateFormat('YYYY-MM-DD')}}</p>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="2">
                            222
                        </mt-tab-container-item>
                    </mt-tab-container>
                </div>
            </div>
            <div class="mui-card-footer">
                <div class="goodsCotent" v-html="content"></div>
            </div>
        </div>



    </div>
</template>

<script>
    import swiper from '../subcomponents/Swiper.vue'
    import numbox from '../subcomponents/Numbox.vue'

    export default {
        data() {
            return {
                goodsId: this.$route.query.id,   // 商品ID
                goodsPics: [],  // 商品图片
                goodsInfo: '',   // 商品详情
                content: '',    // 商品描述
                buyNumber: 1,   // 商品购买数量 默认1
                selected: '1',  // 商品参数选项卡默认值
                ballFlag: false 
            }
        },
        created() {
            this.getGoods()
        },
        components: {
            swiper,
            numbox
        },
        methods: {
            // 获取商品详细信息
            getGoods() {
                this.$http.get('shop/goods/detail?id='+this.goodsId).then( (res) => {
                    if( res.data.code === 0 ) {
                        this.goodsInfo = res.data.data.basicInfo
                        this.content = res.data.data.content
                        this.goodsPics = res.data.data.pics
                        this.goodsPics.forEach(item => {
                            item.picUrl = item.pic
                        });
                    }
                })
            },
            // 获取购买数量
            getNum(data){
                this.buyNumber = data
            },
            // 加入购物车
            addShopCar() {
                this.ballFlag = !this.ballFlag
                // 组建购物车信息
                let shopInfo = {
                    id: this.goodsId,
                    name: this.goodsInfo.name,
                    pic: this.goodsInfo.pic,
                    price: this.goodsInfo.minPrice,
                    num: this.buyNumber,
                    stores: this.goodsInfo.stores,
                    select: true
                }
                this.$store.commit('addCarInfo', shopInfo)
            },
            // beforeEnter : 表示动画入场之前
            beforeEnter(el) { 
                el.style.transform = "translate(0,0)"
            },
            // enter : 表示动画开始之后的样式，可以设置完成动画的结束状态
            enter(el,done) { 
                //如果不写，没有动画效果，可以认为el.offsetWidth会强制动画刷新
                el.offsetWidth; 
                // getBoundingClientRect()  用于获取某个html元素相对于视窗的位置集合
                const ballOpsition = this.$refs.ball.getBoundingClientRect()
                const badgeOpsition = document.getElementById("badge").getBoundingClientRect()
                const xDist = badgeOpsition.left - ballOpsition.left
                const yDist = badgeOpsition.top - ballOpsition.top
                el.style.transform = `translate(${xDist}px, ${yDist}px)`;
                el.style.transition = "all 0.5s cubic-bezier(.39,-0.33,1,.65)";
                //这里的done, 就是afterEnter这个函数的引用(解决动画延迟)
                done()
            },
            // 动画完成之后会调用
            afterEnter(el) { 
                this.ballFlag = !this.ballFlag
            }
        },
    }
</script>

<style lang="scss">
.goodsinfo-container{
    background-color: #fff;
    .mui-card-header{
        font-size: 16px;
        .mint-navbar {
            .mint-tab-item{
                padding: 5px 0;
                color: #333;
                margin-right: 20px;
            }
        }
    }
    .mui-card-content{
        .price{
            font-size: 14px;
            i{
                text-decoration: line-through;
                margin-right: 8px;
            }
            span{
                font-weight: bold;
                color: #f00;
                font-size: 16px;
            }
        }
        .buy-number{
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
            h3{
                font-size: 15px;
                font-weight: normal;
                line-height: 28px;
                margin: 0 8px 0 0;
                padding: 0;
            }
        }
    }
    .goodsCotent{
        img{
            display: block;
            width: 100%;
        }
    }
    .ball{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f00;
        position: absolute;
        z-index: 99;
        left: 158px;
        top: 356px;
    }
}
</style>